<template>
  <div class="fixed inset-0 bg-black/60 bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-[800px] max-h-[80vh] overflow-y-auto">
      <div class="p-6 border-b">
        <div class="flex justify-between items-center">
          <h3 class="text-xl font-semibold">简历预览</h3>
          <button @click="$emit('close')" class="text-gray-600 hover:text-gray-800">
            <i class="ri-close-line text-xl"></i>
          </button>
        </div>
      </div>
      
      <div class="p-6 bg-gray-50">
        <div class="bg-white p-8 rounded-lg shadow-sm">
          <div class="text-center mb-8">
            <h1 class="text-2xl font-bold text-gray-800">钱志远</h1>
            <p class="text-gray-600 mt-1">产品经理 / 品牌经理</p>
            <div class="flex justify-center items-center space-x-4 mt-2 text-sm text-gray-500">
              <span class="flex items-center"><i class="ri-phone-line mr-1"></i>138****5678</span>
              <span>•</span>
              <span class="flex items-center"><i class="ri-mail-line mr-1"></i>qianzhiyuan@example.com</span>
              <span>•</span>
              <span class="flex items-center"><i class="ri-map-pin-line mr-1"></i>上海市浦东新区</span>
            </div>
          </div>
          
          <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">个人介绍</h2>
            <p class="text-gray-700">拥有5年互联网产品和品牌管理经验，曾主导多个用户量过百万的产品从0到1的全流程，对数据驱动的产品决策有深入理解。擅长用户研究、需求分析和产品规划，具备良好的跨部门协作能力。</p>
          </div>
          
          <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">工作经历</h2>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between">
                  <h3 class="font-medium">优趣汇 - 品牌总监</h3>
                  <span class="text-gray-500">2020.07 - 至今</span>
                </div>
                <p class="text-gray-600 mt-1">负责全渠道品牌策略与执行</p>
              </div>
              <div>
                <div class="flex justify-between">
                  <h3 class="font-medium">小红书 - 高级产品经理</h3>
                  <span class="text-gray-500">2018.03 - 2020.06</span>
                </div>
                <p class="text-gray-600 mt-1">负责电商业务产品规划与迭代</p>
              </div>
            </div>
          </div>
          
          <div class="mb-6">
            <h2 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">教育背景</h2>
            <div class="space-y-4">
              <div>
                <div class="flex justify-between">
                  <h3 class="font-medium">上海交通大学</h3>
                  <span class="text-gray-500">2017.09 - 2020.06</span>
                </div>
                <p class="text-gray-600 mt-1">工商管理硕士</p>
              </div>
            </div>
          </div>
          
          <div>
            <h2 class="text-lg font-semibold text-gray-800 border-b pb-2 mb-3">技能特长</h2>
            <div class="flex flex-wrap gap-2">
              <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">产品规划</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">用户研究</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">数据分析</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">品牌策略</span>
              <span class="px-2 py-1 bg-gray-100 text-gray-700 rounded">市场营销</span>
            </div>
          </div>
        </div>
      </div>
      
      <div class="p-4 flex justify-end space-x-3">
        <button @click="$emit('close')" class="px-4 py-2 border border-gray-300 rounded text-gray-600 hover:bg-gray-50">
          关闭
        </button>
        <button @click="downloadPDF" class="px-4 py-2 bg-primary text-white rounded hover:bg-primary/90 flex items-center">
          <i class="ri-download-line mr-1"></i>
          下载PDF
        </button>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
defineEmits<{
  close: []
}>()

const downloadPDF = () => {
  alert('PDF下载功能开发中...')
}
</script>
